<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>xeokit Example</title>
    <link href="../css/pageStyle.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
</head>
<body>
<input type="checkbox" id="info-button"/>
<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
<canvas id="myCanvas"></canvas>
<div class="slideout-sidebar">
    <img class="info-icon" src="../../assets/images/geometry_icon.png"/>
    <h1>buildLineGeometry()</h1>
    <h2>Builds line geometry</h2>
    <p>In this example, we're creating a simple 3D scene that contains a line geometries, which we're
        generating using the buildLineGeometry function.</p>
    <h3>Components Used</h3>
    <ul>
        <li>
            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
               target="_other">Viewer</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/scene/mesh/Mesh.js~Mesh.html"
               target="_other">Mesh</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/scene/geometry/ReadableGeometry.js~ReadableGeometry.html"
               target="_other">ReadableGeometry</a>
        </li>
        <li>
            <a href="../../docs/function/index.html#static-function-buildLineGeometry"
               target="_other">buildLineGeometry()</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/scene/materials/PhongMaterial.js~PhongMaterial.html"
               target="_other">PhongMaterial</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/scene/materials/Texture.js~Texture.html"
               target="_other">Texture</a>
        </li>
    </ul>
</div>
</body>

<script id="source" type="module">

    //------------------------------------------------------------------------------------------------------------------
    // Import the modules we need for this example
    //------------------------------------------------------------------------------------------------------------------

    import {buildLineGeometry, Viewer, Mesh, ReadableGeometry, PhongMaterial} from "../../dist/xeokit-sdk.min.es.js";

    //------------------------------------------------------------------------------------------------------------------
    // Create a Viewer and arrange the camera
    //------------------------------------------------------------------------------------------------------------------

    const viewer = new Viewer({
        canvasId: "myCanvas"
    });

    viewer.camera.eye = [0, 0, 8];
    viewer.camera.look = [0, 0, 0];
    viewer.camera.up = [0, 1, 0];

    //------------------------------------------------------------------------------------------------------------------
    // Create a mesh with simple 2d line shape
    //------------------------------------------------------------------------------------------------------------------

    new Mesh(viewer.scene, {
        geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
            startPoint: [-5,-2,0],
            endPoint: [-5,2,0],
        })),
        material: new PhongMaterial(viewer.scene, {
            emissive: [0, 1,]
        })
    });

    //------------------------------------------------------------------------------------------------------------------
    // Create a mesh with simple 2d line shape with black color
    //------------------------------------------------------------------------------------------------------------------

    new Mesh(viewer.scene, {
        geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
            startPoint: [-4,-2,0],
            endPoint: [-4,2,0],
        })),
        material: new PhongMaterial(viewer.scene, {
            emissive: [0, 0, 0]
        })
    });

    //------------------------------------------------------------------------------------------------------------------
    // Create a mesh with simple 2d line shape with black color and simple pattern
    //------------------------------------------------------------------------------------------------------------------

    new Mesh(viewer.scene, {
        geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
            startPoint: [-3,-2,0],
            endPoint: [-3,2,0],
            pattern: [0.10],
        })),
        material: new PhongMaterial(viewer.scene, {
            emissive: [0, 0, 0]
        })
    });

    //------------------------------------------------------------------------------------------------------------------
    // Create a mesh with simple 2d line shape with blue color and simple pattern extended to end
    //------------------------------------------------------------------------------------------------------------------

    new Mesh(viewer.scene, {
        geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
            startPoint: [-2,-2,0],
            endPoint: [-2,2,0],
            pattern: [0.10],
            extendToEnd: true,
        })),
        material: new PhongMaterial(viewer.scene, {
            emissive: [0, 0, 1]
        })
    });

    //------------------------------------------------------------------------------------------------------------------
    // Create a mesh with simple 2d line shape with black color and more complex pattern
    //------------------------------------------------------------------------------------------------------------------

    new Mesh(viewer.scene, {
        geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
            startPoint: [-1,-2,0],
            endPoint: [-1,2,0],
            pattern: [0.15, 0.05],
        })),
        material: new PhongMaterial(viewer.scene, {
            emissive: [0, 0, 0]
        })
    });

    //------------------------------------------------------------------------------------------------------------------
    // Create a mesh with simple 2d line shape with blue color and more complex pattern extended to end
    //------------------------------------------------------------------------------------------------------------------

    new Mesh(viewer.scene, {
        geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
            startPoint: [0,-2,0],
            endPoint: [0,2,0],
            pattern: [0.15, 0.05],
            extendToEnd: true,
        })),
        material: new PhongMaterial(viewer.scene, {
            emissive: [0, 0, 1]
        })
    });

    //------------------------------------------------------------------------------------------------------------------
    // Create a mesh with simple 2d line shape with black color and complex pattern
    //------------------------------------------------------------------------------------------------------------------

    new Mesh(viewer.scene, {
        geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
            startPoint: [1,-2,0],
            endPoint: [1,2,0],
            pattern: [0.15, 0.05, 0.50],
        })),
        material: new PhongMaterial(viewer.scene, {
            emissive: [0, 0, 0]
        })
    });

    //------------------------------------------------------------------------------------------------------------------
    // Create a mesh with simple 2d line shape with blue color and complex pattern extended to end
    //------------------------------------------------------------------------------------------------------------------

    new Mesh(viewer.scene, {
        geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
            startPoint: [2,-2,0],
            endPoint: [2,2,0],
            pattern: [0.15, 0.05, 0.50],
            extendToEnd: true,
        })),
        material: new PhongMaterial(viewer.scene, {
            emissive: [0, 0, 1]
        })
    });

    //------------------------------------------------------------------------------------------------------------------
    // Create a mesh with simple 3d line shape with white color and simple pattern
    //------------------------------------------------------------------------------------------------------------------

    new Mesh(viewer.scene, {
        geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
            startPoint: [3,-2,-1],
            endPoint: [5,2,1],
            pattern: [0.10],
        })),
        material: new PhongMaterial(viewer.scene, {
            emissive: [1, 1, 1]
        })
    });

    //------------------------------------------------------------------------------------------------------------------
    // Create a mesh with simple 3d line shape with black color and simple dot pattern
    //------------------------------------------------------------------------------------------------------------------

    new Mesh(viewer.scene, {
        geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
            startPoint: [5,-2,-1],
            endPoint: [7,2,1],
            pattern: [0.03],
        })),
        material: new PhongMaterial(viewer.scene, {
            emissive: [0, 0, 0]
        })
    });

</script>
</html>